<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>定时器动画</title>
  <style>
    #item{
      width:50px;
      height:50px;
      background-color: cyan;
    }
  </style>
</head>
<body>
  <div id="item"></div>
  <script>
    // 获取元素对象
    var oDiv = document.getElementById('item');
    // 启动一个多次定时器，让div的宽度逐渐变大
    var i = 0;
    var set=setInterval(function(){
      i++;
      oDiv.style.width=i+'px';
      oDiv.style.height=i+'px';
      if(i==200){
        clearInterval(set);
      }
    },50)
  </script>
</body>
</html>
